
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<style type="text/css">
			body{
				background: url(img/javier-zhang-sWzQoyX44IA-unsplash.jpg) no-repeat;
			}
			#login{
				width: 430px;
				/* 最外面的大框框 */
				height: 320px;
				background-color: whitesmoke;
				border: 1px solid #FFFFFF;
				box-shadow: 10px 10px 10px #888888;
				position: absolute;
				left:500px;
				top:200px;
				border-radius:20px ;
				padding: 20px 100px 20px 20px;
			}
			form{
				font-size: 20px;
				margin-top: 20px;
				margin-left: 60px;
			}
			input:focus{
				border: 1px solid #red;
				/* 点了之后变个颜色 */
			}
			
			input{
				width: 400px;
				height: 30px;
				border: 3px solid grey;
				/* 调输入框框 */
				margin-top: 5px;
				/* 用户名不能和输入框站得太紧 */
				margin-bottom: 5px;
				/* 上下留白 */
				font-size: 14px;
				/* 输入框中文字的大小调整 */
				border-radius: 5px;
				/* 边角要圆滑 */
			}
			
			button{
				margin-left: 130px;
				/* 确认按钮让它别太偏移 */
				margin-top: 10px;
				width: 120px;
				height: 40px;
				border: 1px solid lightblue;
				/* 确认按钮的颜色 */
				border-radius: 10px;
				/* 边角圆滑 */
				background-color: #256FFF;
				color: white;
			}
			
			
		</style>
	</head>
	<body>
		<div id="login">
			<img src="./img/logo.png" style="width:500px ;">
			<form>
				<label for="username">用户名</label><br>
				<input type="text" id="username" placeholder="请输入用户名"><br/>
				<label for="password">密码</label><br>
				<input type="password" id="password" placeholder="请输入密码"><br>
				<button>登录</button>
			</form>
		</div>
	</body>
</html>
